<template>
  <BetterScroll ref="Bs">
    <div class="btn">
      <el-button type="success" @click="handleAdd"
        ><el-icon><circle-plus /></el-icon>增加</el-button
      >
      <el-button type="danger" @click="handleDeleteOne"
        ><el-icon><delete-filled /></el-icon> 批量删除</el-button
      >
    </div>

    <el-table
      ref="multipleTableRef"
      :data="state.tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品名称" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.configName }} </template>
      </el-table-column>
      <el-table-column label="跳转链接" show-overflow-tooltip>
        <template #default="scope">
          <a target="_blank" href="#">{{ scope.row.redirectUrl }}</a>
        </template>
      </el-table-column>
      <el-table-column
        property="configRank"
        label="排序值"
        show-overflow-tooltip
      />
      <el-table-column
        property="goodsId"
        label="商品编号"
        show-overflow-tooltip
      />
      <el-table-column
        property="updateTime"
        label="添加时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <a href="#" class="mya" @click.prevent="change(scope.row.configId)"
            >修改</a
          >
          <a href="#" class="mya" @click="handleDeleteOne">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </BetterScroll>
  <DialogAddGood
    ref="addGood"
    :reload="getGoodList"
    :type="state.type"
    :configType="state.configType"
  />
</template>

<script>
import BetterScroll from "@/components/betterscroll/BetterScroll.vue"
import DialogAddGood from "@/components/DialogAddGood.vue"

export default {
  components: {
    BetterScroll,
    DialogAddGood,
  },
  mounted() {},
}
</script>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { ElTable } from "element-plus"
import axios from "@/utils/axios"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus/lib/components"
// 首页配置类型参数
const configTypeMap = {
  hot: 3,
  new: 4,
  recommend: 5,
}

const multipleTableRef = ref()
const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const router = useRouter()
const route = useRoute()

const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  type: "add", // 操作类型
  configType: 3, // 3-(首页)热销商品 4-(首页)新品上线 5-(首页)为你推荐
})
const addGood = ref(null)

//请求数据
const getGoodList = () => {
  state.loading = true
  axios
    .get("/indexConfigs", {
      params: {
        pageNumber: state.currentPage,
        pageSize: state.pageSize,
        configType: state.configType,
      },
    })
    .then((res) => {
      state.tableData = res.list
      state.total = res.totalCount
      state.currentPage = res.currPage
      state.loading = false
    })
}

// onMounted(() => {
//   router.beforeEach((to) => {
//     console.log(to)
//   })
// })

// 添加轮播项
const handleAdd = () => {
  state.type = "add"
  addGood.value.open()
}

// 修改轮播图
const change = (id) => {
  state.type = "edit"
  addGood.value.open(id)
}

//删除轮播图
const handleDeleteOne = () => {
  ElMessage.error("删除功能还未实现")
}

//请求分页的数量
const changePage = (val) => {
  state.currentPage = val
  getGoodList()
}

//页面渲染是发起请求
getGoodList()
</script>

<style scoped>
.el-button {
  margin: 20px;
}
.fenye {
  position: relative;
  height: 70px;
}
.el-pagination {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mya {
  margin-left: 15px;
  text-decoration: none;
  color: #689eff;
}
</style>
